<div class="comp-price">
    <div class="price-temp" v-if="hasInitCoins === false"></div>
    <ul class="list" v-if="hasInitCoins === true">
        <li class="item fn-clearfix" v-for="(item, $key) in coins" v-if="item.status !== 'INIT'">
            <a href="javascript:;" class="item-link" @click="goPage(item)">
                <div class="link-box">
                    <div class="item-left">
                        <i class="icon" :class="'coin-' + item.assetCode2.toLowerCase()"></i>
                        <div class="code">{{item.assetCode2 + '/' + item.assetCode1}}</div>
                        <span class="text" :class="{'fn-color-buy':+coins[$key].changeRatio>=0, 'fn-color-sell':+coins[$key].changeRatio<0}">
                        <template v-if="!lib.isMobile()">
                            <!-- , 'fn-white':+coins[$key].changeRatio==0 -->
                            <animate-number ref="coins[$key].changeRatio"
                                            :to="coins[$key].changeRatio">
                            </animate-number>%
                        </template>
                        <template v-else>{{coins[$key].changeRatio}}%</template>
                    </span>
                        <span class="num">
                        <span class="strong">
                            <template v-if="!lib.isMobile()">
                                <animate-number :precision="+item[symbolConfig.PRICEPRECISION]"
                                                ref="price"
                                                :to="coins[$key].firstOrder.price">
                                </animate-number>
                            </template>
                            <template v-else>{{coins[$key].firstOrder.price}}</template>
                        </span>
                        <span class="text">{{item.assetCode1}}</span>
                    </span>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>